<template>
  <label for="uploadImage" @click="clickFile">
    <el-tooltip class="item" effect="dark" :content="$t('common.base.image')" placement="top">
      <i class="iconfont icon-image image" :style="{color: disabled ? '#bfbfbf': '',cursor: disabled ? 'not-allowed': 'pointer'}"></i>
    </el-tooltip>
    <input :disabled="disabled" type="file" class="hide" ref="imgDom" @change="pictureChange" accept="image/*" multiple/>
  </label>
</template>

<script>
import FileMixin from './FileMixin.js';
export default {
  name: 'upload-image',
  mixins: [FileMixin],
  props: {
    hxIdObj: {
      type: Object
    },
    disabled: {
      type: Boolean
    },
    source: {
      type: String
    },
  },
  data() {
    return {
      image: null
    };
  },
  methods: {
    async pictureChange(event) {
      this.handleFileChange(event, 'newImage')
      this.$refs.imgDom.value = null
    }, 
    clickFile() {
      let img = this.$refs.imgDom;
      img && img.click();
    },
    inputRef(node) {
      this.image = node;
    }
  }
};
</script>
<style scoped>
.image{
  color:#8c8c8c;
  cursor: pointer;
}
.image:hover{
  color:$color-primary-light-6;
}
.hide {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: none;
}
.el-icon-picture-outline {
    font-size: 14px;
    margin: 10px 15px;
}
</style>
